<template>
  <s-layout class="set-wrap" title="常见问题" :bgStyle="{ color: '#FFF' }">
    <uni-collapse>
      <uni-collapse-item v-for="(item, index) in state.list" :key="item">
        <template v-slot:title>
          <view class="ss-flex ss-col-center header">
            <view class="ss-m-l-20 ss-m-r-20 icon">
              <view class="rectangle">
                <view class="num ss-flex ss-row-center ss-col-center">
                  {{ index + 1 < 10 ? '0' + (index + 1) : index + 1 }}
                </view>
              </view>
              <view class="triangle"> </view>
            </view>
            <view class="title ss-m-t-36 ss-m-b-36">
              {{ item.title }}
            </view>
          </view>
        </template>
        <view class="content ss-p-l-78 ss-p-r-40 ss-p-b-50 ss-p-t-20">
          <text class="text">{{ item.content }}</text>
        </view>
      </uni-collapse-item>
    </uni-collapse>
    <s-empty
      v-if="state.list.length === 0 && !state.loading"
      text="暂无常见问题"
      icon="/static/collect-empty.png"
    />
  </s-layout>
</template>

<script setup>
  import { onLoad } from '@dcloudio/uni-app';
  import { reactive } from 'vue';
  import sheep from '@/sheep';
  import { useI18n } from 'vue-i18n'
  
  const { t }  = useI18n()
  
	const stateList = {
		enList: [
			{"title": "Who will bear the shipping cost if the product is returned?", "content": `Dear customer, the platform's shipping fee rules adhere to the principle of "whoever is at fault bears the responsibility". If it is not a merchant or logistics issue, we suggest that you contact the merchant for negotiation and handling. After sales and return shipping fees need to be borne by yourself; If there are quality issues with the product or if the merchant sends the wrong item, the return shipping cost will be borne by the merchant. In order to better protect your rights and interests, please keep the relevant vouchers. Please advance the return logistics costs first and do not use collect payment. After the merchant receives the goods you sent back and the refund is successful, you can contact the merchant with the vouchers to handle it~`},
			{"title": "Is the order displayed as pending payment after payment?", "content": `If your account shows that the payment has been deducted, but the order transaction status shows "waiting for payment", it may be due to network congestion causing data delay. We suggest that you pay attention to the order transaction status and transaction account flow later.`},
			{"title": "Delivery time", "content": "In general, shipments are made within 48 hours after the user places an order"}
		],
		cnList: [
			{"title": "商品退货了，谁承担运费？", "content": "亲，平台运费规则秉承“谁过错，谁承担”的原则,如非商家或者物流问题，建议您联系商家协商处理，售后，退货运费需要您自行承担;如商品存在质量问题、商家发错货等情况，退货运费由商家承担。为了更好的保障您的权益，请您保留好相关凭证,退货物流费用麻烦您先垫付，不要使用到付，待商家收到您寄回的商品，退款成功后，您可以凭借凭证联系商家处理~"},
			{"title": "付款后订单显示待付款？", "content": "如您账户显示已扣款，但订单交易状态显示”等待付款”，可能是由于网络繁忙导致数据延迟，建议您稍后关注订单交易状态以及交易账户流水情况。"},
			{"title": "发货时间", "content": "一般情况下，用户下单后48小时内发货"}
		],
		koreanList: [
			{"title": "상품을 반품했는데 누가 운송비를 부담합니까?", "content": `친, 플랫폼 운임 규칙은"누가 잘못하고 누가 부담하는가"의 원칙을 계승한다. 예를 들어 비상가 또는 물류 문제는 당신이 상인에게 연락하여 협상하여 처리하는 것을 건의한다. 판매 후, 반품 운임은 당신이 스스로 부담해야 한다;만약 상품에 품질문제가 존재하거나 상인이 물건을 잘못 발송하는 등 상황이 있을 경우 반품운임은 상인이 부담한다.귀하의 권익을 더욱 잘 보장하기 위해서, 당신은 관련 증빙서류를 잘 보존하시기 바랍니다. 반품 물류비용은 귀하가 먼저 대신 지불하시기 바랍니다. 착불로 사용하지 마십시오. 상인이 귀하가 보낸 상품을 받은 후, 환불에 성공한 후, 당신은 증빙서류로 상인에게 연락하여 처리할 수 있습니다~`},
			{"title": "지불 후 주문서에 지불 대기가 표시됩니까?", "content": "만약에 귀하의 계정에 공제된 금액이 표시되지만 주문 거래 상태는'지불 대기'라고 표시되면 인터넷이 바빠서 데이터가 지연될 수 있으므로 잠시 후에 주문 거래 상태와 거래 계좌의 흐름 상황을 지켜보는 것이 좋습니다."},
			{"title": "배송 시간", "content": "일반적으로 주문 후 48시간 이내에 배송"}
		]
	}
  
    
  const state = reactive({
    list: stateList[t('pages.public.faq.stateList')],
    loading: true,
  });

  async function getFaqList() {
    const { code, data } = await sheep.$api.data.faq();
    if (code === 1) {
      state.list = data;
      state.loading = false;
    }
  }
  onLoad(() => {
    // getFaqList();
  });
</script>

<style lang="scss" scoped>
  .header {
    .title {
      font-size: 28rpx;
      font-weight: 500;
      color: #333333;
      line-height: 30rpx;
      max-width: 688rpx;
    }

    .icon {
      position: relative;
      width: 40rpx;
      height: 40rpx;

      .rectangle {
        position: absolute;
        left: 0;
        top: 0;
        width: 40rpx;
        height: 36rpx;
        background: var(--ui-BG-Main);
        border-radius: 4px;

        .num {
          width: 100%;
          height: 100%;
          font-size: 24rpx;
          font-weight: 500;
          color: var(--ui-BG);
          line-height: 32rpx;
        }
      }

      .triangle {
        width: 0;
        height: 0;
        border-left: 4rpx solid transparent;
        border-right: 4rpx solid transparent;
        border-top: 8rpx solid var(--ui-BG-Main);
        position: absolute;
        left: 16rpx;
        bottom: -4rpx;
      }
    }
  }

  .content {
    border-bottom: 1rpx solid #dfdfdf;

    .text {
      font-size: 26rpx;
      color: #666666;
    }
  }
</style>
